<template>
   <div style="background-color: white;">
    <h2 style="color: black;">新增订单</h2>
    <form>
      <table style="margin: auto; text-align: center; border-collapse: separate; border-spacing:10px 70px;">
        <tr>
            <td> 订单编号：</td>
            <td><input type="text" v-model="form.orderNo"></td>
        </tr>
        <tr>
            <td>订单用户：</td>
            <td><input type="text" v-model="form.orderName"></td>
        </tr>
        <tr>
            <td>订单时间：</td>
            <td><input type="datetime-local" v-model="form.orderTime"></td>
        </tr>
        <tr>
            <td>订单金额：</td>
            <td><input type="number" v-model="form.orderAmount"></td>
        </tr>
        <tr>
            <td colspan="2">
                <button type="submit" @click="save">保存</button>
                <button type="button" @click="cancel">取消</button>   
            </td>
        </tr>
      </table>
      
    </form>
  </div>
</template>

<script>
 import {order} from '@/main';
export default {
    // props: {
    // order: Object // 当前编辑的订单对象，如果是新增订单则为 null
    // },
    data() {
        return {
        form: {  // 订单表单数据
            orderNo: '',
            orderName: '', 
            orderTime: '', 
            orderAmount: ''
        }
        }
    },
    // computed: {
    //     editing() {
    //     // 判断当前是否为编辑订单状态
    //     return !!this.order
    //     }
    // },
    // created() {
    //     // 如果是编辑订单状态，则将订单数据赋值给表单数据
    //     if (this.editing) {
    //     this.form = { ...this.order }
    //     }
    // },
    mounted() {
        // 监听 add-order 事件，在事件回调中接收到订单列表
        order.$bus.$on('ordersAdd', orders => {
            this.orders = orders;
            console.log(orders);
        });
    },
    methods: {
    // 保存新增订单
    save() {
      const newOrder = Object.assign({}, this.form, {
        id: this.orders.length + 1
      });
      this.orders.push(newOrder);
      this.$router.push({ path: '/orders' });
    },
    // 取消新增订单
    cancel() {
      this.$router.push({ name: 'orders' });
    }
  }
}
</script>

<style>

</style>